<template>
  <div id="notice">
    <a-modal
      title="重复立项风险分析报告"
      :visible="visible"
      :closable="true"
      :confirm-loading="confirmLoading"
      :maskClosable="false"
      :footer="null"
      width="700px"
      height="800"
      @ok="handleOk"
      @cancel="handleCancel"
      id="notice"
    >
      <a-tabs default-active-key="1" @change="callback" :tabBarGutter="57">
        <a-tab-pane key="1" tab="横向分析">
          <div id="test" style="width: 100%; height: 450px"></div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="纵向分析" force-render>
          <a-empty :description="false" style="margin: 100px 0">
            暂无纵向分析
          </a-empty>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
// import { Chart } from "@antv/g2";

let yLabel = [
  "项目设施查重数1",
  "项目设施查重数2",
  "项目设施查重数3",
  "项目设施查重数4",
  "项目设施查重数5",
  "项目设施查重数6",
  "项目设施查重数7",
  "项目设施查重数8",
];
let yData = [654, 802, 769, 513, 755, 755, 1051, 726];
let bgData = [];
for (var i in yData) {
  console.log(i);
  bgData.push(2000);
}
var echarts = require("echarts");
export default {
  name: "notice",
  data() {
    return {
      visible: false,
      confirmLoading: false,
    };
  },
  watch: {
    visible: {
      handler() {
        setTimeout(() => {
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById("test"));
          var option = {
            grid: {
              left: "5%",
              right: "5%",
              bottom: "10%",
              top: "5%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                shadowStyle: {
                  color: "#F7F7F7", //触发背景颜色
                },
              },
              formatter: function (params) {
                return (
                  params[0].name +
                  "<br/>" +
                  "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#3BA0EE'></span>" +
                  params[0].seriesName +
                  " : " +
                  params[0].value +
                  "个" +
                  " <br/>"
                );
              },
            },
            legend: {
              data: ["项目重复原因分布"],
              bottom: 0,
            },
            backgroundColor: "#ffffff",
            xAxis: {
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: "value",
              axisLabel: {
                show: true,
                margin: 15,
                color: "#333333",
                textStyle: {
                  color: "#333333",
                },
              },
            },
            yAxis: [
              {
                type: "category",
                inverse: true,
                axisLabel: {
                  show: true,
                  margin: 15,
                  color: "#333333",
                  textStyle: {
                    color: "#333333",
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#CCCCCC",
                    offsetX: 5.5,
                  },
                },
                data: yLabel,
              },
            ],
            series: [
              {
                name: "项目重复原因分布",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                  normal: {
                    barBorderRadius: [30, 30, 30, 30],
                    color: "#3BA0EE",
                  },
                },
                barWidth: 10,
                label: {
                  show: true,
                  position: "right",
                  color: "rgba(231, 3, 3, 1)",
                  borderColor: "#FFFFFF",
                  offset: [-7, 0],
                  backgroundColor: "#3BA0EE",
                  borderWidth: 5,
                  borderType: "solid",
                  borderRadius: [76, 76, 76, 76],
                  width: 10,
                  height: 10,
                  shadowColor: "#D8DCE1",
                  shadowOffsetX: 1,
                  shadowOffsetY: 1,
                  formatter: function () {
                    return "";
                  },
                },
                data: yData,
              },
              {
                name: "背景",
                type: "bar",
                barWidth: 10,
                barGap: "-100%",
                data: bgData,
                itemStyle: {
                  normal: {
                    color: "#F2F2F2",
                    barBorderRadius: [30, 30, 30, 30],
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
        }, 10);
      },
    },
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    callback(key) {
      console.log(key);
    },
  },
};
</script>

<style lang="less" scoped>
</style>